import React, { Component } from 'react'
import { Select, Form, Card, Button, Row, Col, Table, Divider, Tag } from 'antd';
import './index.css';
import AddButton from "./AddButton"


export default class index extends Component {
    render() {

        const columns = [
            {
                title: '隶属机构',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '科室名称',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '科室代码',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '创建时间    ',
                key: 'tags',
                dataIndex: 'tags',
                render: tags => (
                    <span>
                        {tags.map(tag => {
                            let color = tag.length > 5 ? 'geekblue' : 'green';
                            if (tag === 'loser') {
                                color = 'volcano';
                            }
                            return (
                                <Tag color={color} key={tag}>
                                    {tag.toUpperCase()}
                                </Tag>
                            );
                        })}
                    </span>
                ),
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                   
                    </span>
                ),
            },
        ];

        const data = [
            {
                key: '1',
                name: '飞天机构',
                age: '001极地',
                address: '北极区域',
                tags: ['2001-12-3'],
            },
            {
                key: '2',
                name: '战地机构',
                age: "002极地",
                address: '南极区域',
                tags: ['2001-12-3'],
            },

        ];

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        return (
            <div>
                <Card style={{ width: "100%" }}>
                    <Form {...formItemLayout} layout="horizontal">
                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="省份">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择省份"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="城市">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择城市"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="区县">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择区县"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Button type="primary"  >
                                    查询
                                </Button>
                                <Button style={{ marginLeft: "10px" }}>重置</Button>
                            </Col>
                        </Row>
                    </Form>

                    <div style={{ width: "100%", height: "20px" }}>

                    </div>
                    <AddButton></AddButton>

                    <Table columns={columns} dataSource={data} />




                </Card>



            </div >

        )
    }
}
